<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>在库物资维护</title>

		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>
		<!-- 引入 echarts.js -->
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

		<style>
			.page {
				position: fixed;
				bottom: 0;
				height: 5%;
				width: 90%;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="物资名称">
						<el-input v-model="formInline.materialname" placeholder="物资名称"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="selectTj">查询</el-button>
				</el-form>
			</fieldset>
			<!-- 查询开始 -->
			<el-table size="big" :data="tableData" border style="width: 100%">
				<!-- <el-table-column prop="materialid" label="物资id" width="60">
				</el-table-column> -->
				<el-table-column align="center" prop="codematerial" label="物资编码" width="160">
				</el-table-column>
				<el-table-column align="center" prop="materialname" label="物资名称" width="160">
				</el-table-column>
				<el-table-column align="center" prop="warehouse" label="所属仓库" width="160">
				</el-table-column>
				<el-table-column align="center" prop="area" label="所属仓库区" width="160">
				</el-table-column>
				<el-table-column align="center" prop="shelves" label="所属区货架" width="160">
				</el-table-column>
				<el-table-column align="center" prop="quantity" label="数量" width="160">
				</el-table-column>
				<el-table-column align="center" prop="remark" label="备注">
				</el-table-column>
				<el-table-column align="center" label="操作" width="140">
					<template slot-scope="scope">
						<el-button type="primary" size="mini"
							@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="page">
				<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="tocal" :page-size="pagesize">
				</el-pagination>
			</div>
			<!-- 分页 -->

			<!-- 查询结束 -->

			<!-- 编辑修改物资信息开始 -->
			<el-dialog title="编辑菜单" :visible.sync="dialogFormVisible">

				<el-form ref="form1" :model="sizeForm1" label-width="100px" size="mini">

					<el-form-item prop="materialid" label="物资id">
						<el-input v-model="sizeForm1.materialid"></el-input>
					</el-form-item>



					<el-form-item label="所属仓库">
						<el-cascader v-model="sizeForm1.warehouseidall" :options="optionswarehouse" filterable
							:props="{ 'value':'aid','label': 'warehouse' }"></el-cascader>
					</el-form-item>



					<el-form-item label="物资数量" prop="quantity">
						<el-input v-model="sizeForm1.quantity"></el-input>
					</el-form-item>

					<el-form-item label="备注" prop="remark">
						<el-input v-model="sizeForm1.remark"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dian">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 编辑修改物资信息结束 -->

		</div>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 1100px;height:300px;"></div>

		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			option = {
				/* title: {
					text: '在库物资数量统计',

				}, */
				tooltip: {
					trigger: 'axis'
				},
				/* legend: {
					data: ['蒸发量', '降水量']
				}, */
				toolbox: {
					show: true,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						magicType: {
							show: true,
							type: ['line', 'bar']
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				calculable: true,
				xAxis: [{
					type: 'category',
					data: [] //物资名称获取
				}],
				yAxis: [{
					type: 'value'
				}],
				series: {
					name: '在库物资数量',
					type: 'bar',
					data: [],
					markPoint: {
						data: [{
								type: 'max',
								name: '最大值'
							},
							{
								type: 'min',
								name: '最小值'
							}
						]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					}
				},
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);


			var vm = new Vue({
				el: "#app",
				data: {
					tableData: [],
					formInline: {
						materialname: ''
					},
					//物资信息查询
					selectForm: {
						warehouse: '', //仓库名称
						area: '', //仓库区的名称
						shelves: '', //区货架的名称
						codematerial: '', //物资编码
						materialname: '' //物资名称

					},

					//编辑物资
					sizeForm1: {
						materialid: '',
						warehouseid: '',
						areaid: '',
						shelves: '',
						quantity: '',
						remarks: '',
						warehouseidall: ''
					},
					optionswarehouse: [],

					dialogFormVisible: false,

					formLabelWidth: '120px',

					warehouseidoptions: [], //仓库下拉列表原始值
					areaidoptions: [], //仓库区下拉列值
					shelvesoptions: [], //所属区货架初始值
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 5 //每页条数
				},
				methods: {
					handleCurrentChange(val) { //分页
						this.page = val //设置当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					getOption() {
						//获取在库物资信息
						var that = this
						axios.post(HTTP + "materialstor/zhuSelectQ").then(function(res) {
							//	alert(JSON.stringify(res));
							option.series.data = res.data.data.list
							myChart.setOption(option);

						}).catch(err => {
							console.log(err)
						});
						axios.post(HTTP + "materialstor/zhuSelectName").then(function(res) {
							option.xAxis[0].data = res.data.data.list
							myChart.setOption(option);

						}).catch(err => {
							console.log(err)
						});
					},
					//编辑修改物资信息
					handleEdit(index, row) {
						console.log(index, row.id);
						this.dialogFormVisible = true
						//加载仓库,仓库区,区货架信息
						this.getParentMent()
						var that = this

						axios.post(HTTP + "material/upSelectAl", {
							"id": row.id
						}).then(function(res) {
							that.sizeForm1 = res.data.data.list[0]
							that.sizeForm1.warehouseidall = ('a' + res.data.data.list[0].warehouseid + ',b' + res
								.data.data.list[0].areaid + ',c' + res.data.data.list[0].shelves).split(",")
						}).catch(err => {
							console.log(err)
						});
					},
					getParentMent() {
						//获取仓库信息
						var that = this
						axios.post(HTTP + "warehouse/selectallmaterial").then(function(res) {
							//alert(JSON.stringify(res.data.data.list));
							let jsontree = arrayToTree2(res.data.data.list)
							//alert(JSON.stringify(jsontree));
							that.optionswarehouse = jsontree
						}).catch(err => {
							console.log(err)
						});
					},
					dian() { //修改数据提交
						this.dialogFormVisible = false

						this.sizeForm1.warehouseid = this.sizeForm1.warehouseidall[0].replaceAll("a", "")
						this.sizeForm1.areaid = this.sizeForm1.warehouseidall[1].replaceAll("b", "")
						this.sizeForm1.shelves = this.sizeForm1.warehouseidall[2].replaceAll("c", "")


						//alert(JSON.stringify(this.sizeForm1))
						var that = this
						axios.post(HTTP + "material/upMaterial", this.sizeForm1).then(function(res) {
							if (res.data.code == 200) {
								//修改
								this.dialogFormVisible = false
								that.$message('修改成功')
								that.page = 1
								location.reload();
								that.initdata()
							}
							1
						}).catch(err => {
							console.log(err)
						});



					},

					//查询
					initdata() {
						var that = this
						//获取在库物资数据
						axios.get(HTTP + "material/select/" + this.page).then(function(res) {
							//alert(JSON.stringify(res.data.data.pageInfo.list));
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total
						}).catch(err => {
							console.log(err)
						});

					},

					selectTj() {
						//根据条件查询
						var that = this
						//alert(JSON.stringify(this.formInline))
						axios.post(HTTP + "material/searchSelect", this.formInline).then(function(
							res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.list
							that.tocal = res.data.data.total

						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata()
					this.getOption()

				}
			})
		</script>
	</body>
</html>